<template>
  <common-page class="set-important-data" title="设置识别规则">
    <el-button slot="header" @click="$emit('close')">返回</el-button>
    <el-button
      slot="header"
      type="primary"
      @click="submit"
      :loading="headerLoading"
      >保存</el-button
    >

    <div class="set-important-data__container" slot="content">
      <div class="import-data-table-container">
        <common-table
          :data="tempList"
          border
          v-loading="loading"
          class="import-data-table"
        >
          <el-table-column
            prop="url"
            align="left"
            label="URL"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="systemName"
            align="left"
            label="业务系统"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="left" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <div class="custom-header">
                <span>样本（{{ nums }}条）</span>

                <el-dropdown @command="moreTool($event)">
                  <span
                    class="el-dropdown-link"
                    style="cursor: pointer; margin-left: 8px; font-size: 12px"
                  >
                    <i
                      class="iconfont icon-xitongpeizhi"
                      style="font-size: 12px"
                    ></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="size">
                    <el-dropdown-item command="two"> 显示2条 </el-dropdown-item>
                    <el-dropdown-item command="five">
                      显示5条
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.sample"
                :key="index"
                :style="{ height: `calc(100% / ${scope.row.sample.length})` }"
                :class="[
                  'column-style',
                  index === scope.row.sample.length - 1
                    ? 'last-column-style'
                    : '',
                ]"
              >
                <span class="column-custom-content">{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="识别规则" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select
                v-model="list[scope.$index].typeIds"
                multiple
                clearable
                filterable
              >
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :disabled="item.status === 1"
                  :label="item.ruleName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </common-table>
      </div>
    </div>
  </common-page>
</template>

<script>
import { queryList } from "@/api/datahandler/discernRule";
import BaseList from "@/mixins/BaseList";
import Index from "../mixin/setData.vue";
import { manualRuleReview } from "@/api/apisecurity/apiinterface/interface";

export default {
  name: "setCoreData",
  mixins: [BaseList, Index],
  props: {
    info: {
      type: Object,
      default: () => null,
    },
    type: {
      type: String,
      default: () => "column",
    },
  },
  data() {
    return {
      list: [],
      headerLoading: false,
      loading: false,
      dataList: [], //重要数据列表
      cascaderProps: {
        label: "typeName",
        value: "typeId",
        multiple: true,
        emitPath: false,
      },
      open: false,
      buttonLoading: false,
      infoUpdateLoading: false,
      key: "ruleId",
    };
  },
  mounted() {
    this.initDataByNums(2);
    this.getDataList();
  },
  methods: {
    getTypeIds() {
      let ids = [];
      if (this.info.interfaceSensitiveRuleList.length) {
        ids = this.info.interfaceSensitiveRuleList.reduce((r, c) => {
          if (c[this.key] && !r.includes(c[this.key])) r.push(c[this.key]);
          return r;
        }, []);
      }
      return ids;
    },
    submit() {
      this.headerLoading = true;

      let params = {
        id: this.info.id,
        manualInterfaceSensitiveRuleList: this.handleData("ruleId"),
      };

      manualRuleReview(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.$GlobalSuccessMessage("操作成功");
            this.$emit("refresh");
          } else {
            this.$GlobalErrorConfirm("操作失败", res.msg);
          }
        })
        .finally(() => (this.headerLoading = false));
    },

    getDataList() {
      queryList().then((res) => {
        if (res && res.code === 200) {
          this.dataList = res.rows;
        } else {
          this.dataList = [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./styles.scss";
</style>
